<template>
  <div id="app">
      医院设置列表
      <el-form :inline="true" class="demo-form-inline">
         <el-form-item>
            <el-input v-model="hospitalSetQueryVo.hosname" placeholder="医院名称"/>
         </el-form-item>
         <el-form-item>
            <el-input v-model="hospitalSetQueryVo.hoscode" placeholder="医院编号"/>
         </el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      </el-form>

      <!-- 工具条 -->
      <div>
         <el-button type="danger" size="mini" @click="batchRemoveHospSets()">批量删除</el-button>
      </div>

      <el-table :data="returnList" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="hoscode" label="医院编号"> </el-table-column>
      <el-table-column prop="hosname" label="医院名称"> </el-table-column>
      <el-table-column prop="apiUrl" label="apiUrl基础路径"> </el-table-column>
      <el-table-column prop="contactsName" label="联系人"> </el-table-column>
      <el-table-column prop="contactsPhone" label="联系人电话"> </el-table-column>

      <el-table-column label="状态"> 
        <template slot-scope="scope">
          {{scope.row.status == 1 ? "可用" : "不可用"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="280" align="center">
         <template slot-scope="scope">
            <el-button type="danger" size="mini"
               icon="el-icon-delete" @click="removeHospitalSet(scope.row.id)"> 删除
            </el-button>
            <el-button type="primary" size="mini" v-if="scope.row.status == 1"
               icon="el-icon-edit" @click="lockHospitalSet(scope.row.id, 0)">  锁定
            </el-button>
            <el-button type="danger" size="mini" v-else
               icon="el-icon-edit" @click="lockHospitalSet(scope.row.id, 1)">  解锁
            </el-button>
            <router-link :to="'/hospset/edit/'+scope.row.id">
               <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
            </router-link>
         </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
    :current-page="currentPage"
    :page-size="size"
    :total="totalSize"
    style="padding: 30px 0; text-align: center;"
    layout="total, prev, pager, next, jumper"
    @current-change="getList"/>

    
  </div>



</template>

<script>
import hospset from '@/api/hospset.js'

// 定义变量
export default {
  data() {
    return {
      currentPage:1,
      size:5,
      hospitalSetQueryVo:{},  //请求条件，条件封装对象
      returnList:[],  // 返回值
      totalSize:0,       // 总数
      multipleSelection: []  // 复选框的值
      
    }
  },
  // 在页面渲染之前执行，一般调用methods定义的方法，得到数据
  created() {
    this.getList();
  },
  // 定义方法，进行请求接口调用
  methods: {
    // 定义一个方法，用于具体后端请求的调用
    getList(page = 1) {
      this.currentPage = page
      hospset.getHospitalSetList(this.currentPage, this.size, this.hospitalSetQueryVo)
      // 成功后返回的数据
      .then(response => {
        this.returnList = response.data.records;
        this.totalSize = response.data.total;
      })
      // 异常后返回的数据
      .catch(error => {
        console.log(error);
      })
    },
    
    // 逻辑删除医院设置
    removeHospitalSet(id) {
      this.$confirm('此操作删除医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => { //确定执行then方法
          //调用接口
          hospset.removeHospitalSet(id)
           .then(response => {
              //提示
              this.$message({
                 type: 'success',
                 message: '删除成功!'
              })
              //刷新页面
              this.getList(1)
           })
       })
    },

    // 前端获取复选框中ID的值
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    // 批量删除
    batchRemoveHospSets() {
        if (this.multipleSelection == "") {
            this.$alert('请选择要删除的数据！');
            return
        }

      this.$confirm('此操作删除医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => { //确定执行then方法
          // 取值：idList
          var idList = [];
          this.multipleSelection.forEach(element => {
            idList.push(element.id);
          });
          //调用删除接口
          hospset.batchRemoveHospSets(idList)
           .then(response => {
              //提示
              this.$message({
                 type: 'success',
                 message: '删除成功!'
              })
              //刷新页面
              this.getList(1)
           })
       })
    },

    // 锁定与取消锁定
    lockHospitalSet(id, status) {
      hospset.lockHospitalSet(id, status)
      .then(response => {
        //刷新页面
        this.getList(1)
      })
    }

  }
}
</script>